<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/konva.js"></script>
    <script src="js/ProgressBar.js"></script>
</head>
<body>
渐变动画
帧动画

<div id="containerId">

</div>
<script>
    //1.创建舞台
    var stage = new Konva.Stage({
        width:window.innerWidth,
        height:window.innerHeight,
        container:'containerId'
    });
    //2.创建层
    var layer = new Konva.Layer();
    //将层添加舞台中
    stage.add(layer);

    var progressBar = new ProgressBar({
        x:1/8*stage.width(),
        y:0.5*stage.height(),
        width: 0.75*stage.width(),
        height: 1/20*stage.height(),
        fill: 'red',
        stroke: '#666',
        strokeWidth: 5,
        value: 0.1,
        cornerRadius:5
    });

    progressBar.render(layer);
    layer.draw();
    progressBar.update();
</script>
</body>
</html>
